<template>  
  <RouterView />  
  <van-tabbar v-model="active">  
    <van-tabbar-item  
      v-for="item in routerRoutes"  
      :key="item.path"  
      :icon="item.meta.icon"  
      :to="`/${item.path}`"  
    >{{ item.meta.name }}</van-tabbar-item>  
  </van-tabbar>  
</template>  
  
<script setup>  
import { ref, watch, onMounted,computed } from 'vue';  
import { useRoute, useRouter } from 'vue-router';  
  
const router = useRouter();  
const route = useRoute();  
const active = ref(0);  
  
// 定义一个计算属性来获取路由的子路由  
const routerRoutes = computed(() => router.options.routes[0].children);  
  
onMounted(() => {  
  active.value = routerRoutes.value.findIndex(item => '/' + item.path === route.path);  
});  
  
// 通过监听路由变化来及时更新底部导航栏的状态  
watch(  
  () => route.path,  
  (newPath) => {  
    active.value = routerRoutes.value.findIndex(item => '/' + item.path === newPath);  
  },  
  { immediate: true } // 立即执行一次监听器的回调函数  
);  
</script>  
  
<style>  
/* 你的样式 */  
</style>